<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="书海导航 - 智能图书推荐系统，为您发现下一本好书">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>书海导航 - 智能图书推荐系统</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background-color: #f9f9f9;
      }
      #app {
        min-height: 100vh;
      }
      .loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      }
      .loading-content {
        text-align: center;
      }
      .loading-logo {
        width: 120px;
        height: 120px;
        animation: float 2s infinite ease-in-out;
      }
      @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-15px); }
        100% { transform: translateY(0px); }
      }
      .loading-text {
        color: white;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
      }
      .no-script-warning {
        max-width: 800px;
        margin: 50px auto;
        padding: 30px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
      .no-script-warning h2 {
        color: #333;
        margin-bottom: 15px;
      }
      .no-script-warning p {
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
      }
      .no-script-warning a {
        color: #2575fc;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <noscript>
      <div class="no-script-warning">
        <h2>书海导航需要JavaScript支持</h2>
        <p>我们的智能图书推荐系统需要JavaScript才能正常运行，请启用浏览器JavaScript功能后刷新页面。</p>
        <p>如果您不知道如何启用，请参考<a href="https://www.enable-javascript.com/zh/" target="_blank">JavaScript启用指南</a></p>
        <p>启用后，您将体验到：</p>
        <ul>
          <li>个性化图书推荐</li>
          <li>智能阅读偏好分析</li>
          <li>实时书单更新</li>
          <li>流畅的交互体验</li>
        </ul>
      </div>
    </noscript>
    
    <div id="app">
      <!-- 加载动画 -->
      <div class="loading-container">
        <div class="loading-content">
          <p class="loading-text">加载中...</p>
        </div>
      </div>
    </div>
    
    <!-- 内置的SVG图标 (图书相关) -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
      <symbol id="icon-book" viewBox="0 0 24 24">
        <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/>
      </symbol>
      <symbol id="icon-search" viewBox="0 0 24 24">
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
      </symbol>
      <symbol id="icon-recommend" viewBox="0 0 24 24">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
      </symbol>
      <symbol id="icon-category" viewBox="0 0 24 24">
        <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
      </symbol>
    </svg>
    
    <!-- built files will be auto injected -->
  </body>
</html>